import React, { useEffect, useState } from 'react';
import { Box, Divider } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import { t } from '@lingui/macro';
import styles from './PieGroup.module.scss';
import PieChart from './PieChart';

const _barWidth = '10%';

function SubGroupInfo({ scene, data }) {
  const { activityStore: store } = useStore();
  const [state, setState] = useState(null);

  useEffect(() => {
    if (scene && data) {
      const topLeft = [];
      const topRight = [];
      const bottomLeft = [];
      const bottomRight = [];
      const { saleCount: saleCountTotal, costCount: costCountTotal } = data;

      for (let i = 0; i < scene.length; i++) {
        const e = scene[i];
        const { sourceName, clickCount, orderCount, registerCount, saleCount, costCount } = e;
        topLeft.push({ name: sourceName, value: registerCount, percentage: (registerCount / clickCount) });
        topRight.push({ name: sourceName, value: orderCount, percentage: orderCount / clickCount });
        bottomLeft.push({ name: sourceName, value: saleCount?.toFixed(2), percentage: saleCount / saleCountTotal });
        bottomRight.push({ name: sourceName, value: costCount?.toFixed(2), percentage: costCount / costCountTotal });
      }
      setState({
        topLeft,
        topRight,
        bottomLeft,
        bottomRight,
      });
    }
  }, [scene]);

  return (
    <>
      <Divider />
      <div style={{ padding: 10, marginBottom: 20 }}>
        <div className={styles.title}>{t`投放渠道注册量转化率 / 投放渠道下单量转化率:`}</div>
        <Box direction="row">
          <PieChart title={t`投放渠道注册转化率`} data={state?.topLeft} />
          <PieChart title={t`投放渠道下单转化率`} data={state?.topRight} />
        </Box>
      </div>
      <Divider />
      <div style={{ padding: 10, marginBottom: 20 }}>
        <div className={styles.title}>{t`投放渠道成本占比 / 投放渠道销售额占比:`}</div>
        <Box direction="row">
          <PieChart title={t`投放渠道成本占比`} data={state?.bottomLeft} />
          <PieChart title={t`投放渠道销售额占比`} data={state?.bottomRight} />
        </Box>
      </div>
    </>
  );
}

export default observer(SubGroupInfo);
